import { Button, DatePicker, Divider, Flex, Form, Input, message, Modal, Pagination, Popconfirm, Select, Space, Steps, Table, type FormProps, type TableProps } from "antd";
import { useEffect, useState } from "react";
import { deleteMany, deleteOne, getquestions } from "../apis/questions/questions";
import DuestionsDalig from '../component/questions/questionsDalig'
function questions() {
    const [params, setParams] = useState<any>({ page: 1, psize: 10 });
    const [tableData, setTableData] = useState<any[] | undefined>([])
    const [total, setTotal] = useState<number>(0)
    // 批量删除id
    const [ids, setIds] = useState<any[]>([])
    // 子传夫
    // 弹框
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [rowData, setRowData] = useState<any>()
    const cancelHandle = (value: any) => {
        setIsModalOpen(true)
        setRowData(value)
    }
    const handleCancel = () => {
        setIsModalOpen(false);
    };
    const columns = [
        {
            title: 'id',
            dataIndex: 'id',
            key: 'id',
        },
        {
            title: '问题类型',
            dataIndex: 'typename',
            key: 'typename',
            render: (text: string, value: any, record: any) => (
                <>
                    <a onClick={() => cancelHandle(value)}>{text}</a>
                    </>

            ),
        },
        {
            title: '问题描述',
            dataIndex: 'content',
            key: 'content',
        },
        {
            title: '业主名称',
            dataIndex: 'username',
            key: 'username',
        },
        {
            title: '业主电话',
            dataIndex: 'tel',
            key: 'tel',
        },
        {
            title: '维修日期',
            dataIndex: 'addtime',
            key: 'addtime',
        },
        {
            title: '状态',
            dataIndex: 'statename',
            key: 'statename',
        },
        {
            title: '操作',
            dataIndex: 'id',
            width: 200,
            render: (value: number, record: any) => (
                <Flex gap={10}>
                    <Popconfirm
                        title="提示"
                        description="确定要删除此记录吗？"
                        onConfirm={() => confirmDel(record.id)}
                        okText="删除"
                        cancelText="取消"
                    >
                        <Button type="primary" color="default" danger>删除</Button>
                    </Popconfirm>
                </Flex>
            )
        }
    ];
    // 删除
    const confirmDel = async (id: number) => {
        let res = await deleteOne(id)
        console.log(res);
        if (res.errCode == 10000) {
            message.success(
                '删除成功',
            );
        } else {
            message.error(

                '删除失败',
            );
        }
        questionsList()
    }
    // 批量删除
    const delentAll = async () => {
        let res = await deleteMany({ ids: ids })
        if (res.errCode == 10000) {
            message.success('删除成功');
        } else {
            message.error('删除失败');
        }
        questionsList()
    }
    // 获取列表接口
    const questionsList = async () => {
        let res = await getquestions(params)
        setTableData(res.data.list)
        setTotal(res.data.counts);
    }
    useEffect(() => {
        questionsList()
    }, [params])
    useEffect(() => {
        questionsList()
    }, [])
    const onFinish: FormProps<any>['onFinish'] = (values) => {
        setParams({ ...params, ...values, page: 1 })
        questionsList()
    };

    const onChangeTotal = (page: number, psize: number) => {
        setParams({ ...params, page, psize })
    }
    // 日期选择
    const rowSelection: TableProps<any>['rowSelection'] = {
        onChange: (selectedRowKeys: React.Key[], selectedRows: any[]) => {
            setIds(selectedRowKeys)
        },
        getCheckboxProps: (record: any) => ({
            disabled: record.name === 'Disabled User', // Column configuration not to be checked
            name: record.name,
        }),
    };
    // 时间
    const { RangePicker } = DatePicker;
    const onOk = (date: any, dateString: any) => {
        console.log(date, dateString);
    };
    return (
        <>
            {isModalOpen && <DuestionsDalig onCancel={cancelHandle} onCloce={handleCancel}  rowData={rowData} />}
            <Flex vertical style={{ width: "100%" }}>
                <Form
                    layout="inline"
                    name="basic"
                    onFinish={onFinish}
                >
                    <Form.Item<any>
                        label="投诉标题"
                        name="key"
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item<any>
                        label="地址"
                        name="address"
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item<any>
                        label="电话"
                        name="tel"
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item<any>
                        label="时间查询"
                        name="begindate"
                    >
                        <Space direction="vertical" size={12}>
                            <RangePicker showTime onOk={onOk} />
                        </Space>
                    </Form.Item>

                    <Form.Item<any>
                        label="投诉状态"
                        name="state"
                    >
                        <Select
                            showSearch
                            optionFilterProp="label"
                            style={{ width: '180px' }}
                            options={[
                                {
                                    value: 1,
                                    label: '等待处理',
                                },
                                {
                                    value: 2,
                                    label: '正在处理',
                                },
                                {
                                    value: 3,
                                    label: '处理完成',
                                },
                                {
                                    value: 4,
                                    label: '已评价',
                                },
                            ]}
                        />
                    </Form.Item>
                    {/* <br/> */}
                    <Form.Item<any>
                        label="投诉类型"
                        name="type"
                        style={{ marginTop: '20px' }}
                    >
                        <Select
                            showSearch
                            optionFilterProp="label"
                            style={{ width: '180px' }}
                            options={[
                                {
                                    value: 1,
                                    label: '企业房屋装修',
                                },
                                {
                                    value: 2,
                                    label: '公共物业及配套设施',
                                },
                                {
                                    value: 3,
                                    label: '其他问题',
                                },
                            ]}
                        />
                    </Form.Item>

                    <Form.Item label={null} style={{ marginTop: '20px' }}>
                        <Button type="primary" htmlType="submit">
                            搜索
                        </Button>
                    </Form.Item>
                </Form>
                <Flex gap={10} style={{ marginTop: '20px' }}>
                    <Popconfirm
                        title="提示"
                        description="确定要删除此记录吗？"
                        onConfirm={() => delentAll()}
                        okText="删除"
                        cancelText="取消"
                    >
                        <Button danger type="primary">批量删除</Button>
                    </Popconfirm>

                </Flex>
                <Divider />
                <Table rowKey={'id'} columns={columns} style={{ width: '100%' }} pagination={false} dataSource={tableData} rowSelection={rowSelection} />
                <Flex justify="center" style={{ marginTop: "10px" }}>
                    <Pagination onChange={onChangeTotal} current={params.page} total={total} showTotal={(total) => `共${total}条`} />
                </Flex>
            </Flex>
        </>
    )
}
export default questions
